<template>
  <view>
    <view class="order-items">
      <view class="order-item" v-for="(item, index) in list" :key="index">
        <view class="order-item-top">
          <view class="order-item-top-left">{{item.time}}</view>
          <view class="order-item-top-right" :class="item.status == 1?'black':''">{{item.status == 0 ?'审核中':'已出款'}}</view>
          <view class="order-item-top-opr" @tap="contenetShow(item)">
            {{item.open ? '收起':'展开'}}商品
          </view>
        </view>
        <view v-show="item.open">
          <view class="order-item-bottom"  v-for="(ele, idx) in item.good" :key="idx">
            <img :src="ele.img" class="order-item-bottom-left" alt="">
            <view class="order-item-bottom-right">
              <view class="order-item-bottom-right-1">{{ele.name}}</view>
              <view class="order-item-bottom-right-2">
              <view class="order-item-bottom-right-2-left">数量*{{ele.num}}</view>
              </view>
            </view>
          </view>
        </view>  
        <view class="order-item-money">
          <view class="order-item-money-item" v-if="item.commission > 0">
            <view class="order-item-money-item-1">
              平台佣金
            </view>
            <view class="order-item-money-item-2">
              {{item.commission}}
            </view>
          </view>
          <view class="order-item-money-item">
            <view class="order-item-money-item-1">
              对账金额
            </view>
            <view class="order-item-money-item-2">
              {{item.price}}
            </view>
            
          </view>
        </view>
      </view>
    </view>
</view>
  </view>
</template>

<script>
import {adminOrder} from '@/api/order.js' 
  export default {
    data() {
      return {
        page:1,
        limit: 100,
        list: [
          {
            time: '2023-11-12 23:20:20',
            status: 0,
            open: false,
            good: [
              {
                name: '五香瓜子',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2200765402431/O1CN01dM8dbq1TpRjhVvjSf_!!0-item_pic.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml怡宝',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/2201234780074/O1CN01tTmh0h1CPvwnA2ayo_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml百事可乐',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2201234780074/O1CN019gbxa31CPvwjAPggm_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '散装饼干',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2893734215/O1CN0103Msym1h0WC9TN7mx_!!2893734215.jpg_460x460q90.jpg_.webp',
                num:1
              }
            ],
            price: 0.04,
            commission: 0.01
          },
          {
            time: '2023-11-12 23:20:20',
            status: 1,
            open: false,
            good: [
              {
                name: '五香瓜子',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2200765402431/O1CN01dM8dbq1TpRjhVvjSf_!!0-item_pic.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml怡宝',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/2201234780074/O1CN01tTmh0h1CPvwnA2ayo_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml百事可乐',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2201234780074/O1CN019gbxa31CPvwjAPggm_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '散装饼干',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2893734215/O1CN0103Msym1h0WC9TN7mx_!!2893734215.jpg_460x460q90.jpg_.webp',
                num:1
              }
            ],
            price: 0.04,
            commission: 0.01
          },
          {
            time: '2023-11-12 23:20:20',
            status: 0,
            open: false,
            good: [
              {
                name: '五香瓜子',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2200765402431/O1CN01dM8dbq1TpRjhVvjSf_!!0-item_pic.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml怡宝',
                img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/2201234780074/O1CN01tTmh0h1CPvwnA2ayo_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '500ml百事可乐',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2201234780074/O1CN019gbxa31CPvwjAPggm_!!2201234780074.jpg_460x460q90.jpg_.webp',
                num:1
              },
              {
                name: '散装饼干',
                img: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2893734215/O1CN0103Msym1h0WC9TN7mx_!!2893734215.jpg_460x460q90.jpg_.webp',
                num:1
              }
            ],
            price: 0.04,
            commission: 0.01
          },
        ]
      }
    },
    onPullDownRefresh() {
    this.getData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
    methods: {
      contenetShow(item) {
        item.open = !item.open
      },
      getData() {
        adminOrder({
          
        }).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>

<style lang="scss">
  .order-items {
    padding: 24rpx;
    
  }
  .black {
      color:#000!important
  }
  .height0 {
      height: 0
  }
  .order-item {
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    &-money {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      &-item {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        transition: all .3s;
        &-1 {
          color:#333;
          font-size: 24rpx;
        }
        &-2 {
          font-size: 28rpx;
          color: #DF4B43;
          font-weight: bold;
        }
      }
    }
    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      &-opr {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 200rpx;
        font-size: 24rpx;
        color: #333;
      }
      &-left {
        font-size: 28rpx;
        font-weight: bold;
      }
      &-right {
        font-size: 24rpx;
        color: #DF4B43
      }
    }
    &-bottom {
      display: flex;
      margin-top: 10rpx;
      &-left {
        width: 100rpx;
        height: 100rpx
      }
      &-right {
        display: flex;
        flex-direction: column;
        flex:1;
        margin-left: 20rpx;
        justify-content: space-between;
        &-1 {
          font-size: 26rpx;
          color: #948c8c;
        }
        &-2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-left{
            font-size: 24rpx;
            color: #948c8c;
          }
          &-right {
            font-size: 24rpx;
            color: #DF4B43;
          }
        }
      }
    }
  }
.fixedbtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #D9D9D9;
    background-color: #fff;
    z-index: 999;
    padding-top: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

    .btn {
      margin-top: 20rpx;
      width: 90%;
      margin-left: 5%;
      height: 90rpx;
      border-radius: 200px;

      text-align: center;
      display: flex;

      justify-content: center;
      align-items: center;

    }

  }
</style>
